<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>领取礼券</title>
		<link rel="stylesheet" href="../style/lingquliquan.css" />

		<script src="../Resources/flexible.debug.js"></script>
		<script src="../Resources/flexible_css.debug.js"></script>
		<script src="../Resources/artTemplate.js"></script>
		<script src="../Resources/vue.js"></script>
		<script src="../Resources/jquery-3.2.0.js"></script>
	</head>

	<body>
		<header>
			<span id="back"><img src="../imges/qietu/jiantou.png"/></span>
			<span>领取礼券</span>
		</header>

		<main>
			<section class="main_one">
				<img :src="imgs_1" />
				<h1>{{font_1}}</h1>
				<p class="p_1">{{font_2}}</p>
				<p class="p_2">{{font_3}}</p>
				<p class="p_3">{{font_4}}</p>
				<button class="button">{{font_5}}</button>
			</section>

			<section class="main_two">
				<span></span>
				<span>人气单品</span>
				<span></span>
			</section>
			<section class="main_three">
				<dl class="dibu">

				</dl>
			</section>
		</main>

		<script type="text/html" id="list">
			{{each list as v i}}
				<dt><img src="{{v.imgs}}"/></dt>
				<dd>{{v.font_1}}<p>{{v.font_2}}</p></dd>
				
			{{/each}}
		</script>

		<script>
			$("#back").click(function(){
				location.href = "my.html"
			})
			var v = new Vue({
				el: ".main_one",
				data: {
					imgs_1: "../imges/qietu/lingqu_1.png",
					font_1: "hello，地球人。",
					font_2: "感谢你在茫茫宇宙中找到了我们。",
					font_3: "偷偷送你一份堆糖新鲜人见面礼",
					font_4: "快去【堆糖商店】发现你想要的好东西吧。",
					font_5: "立即领取"
				}
			})
		</script>
	
		<script>
		
			$(function(){
            var _url = '../ajax/lingquliquan.json';
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("list", {list:res});	 
				 console.log(str);
				$('.dibu').html(str);
				
			});

            
         })
		</script>
	</body>

</html>